<%-- 
    Document   : Hospital
    Created on : 7 ??.?. 2554, 15:42:13
    Author     : SUNTIPARB
--%>
<%-- Form Function --%>
<script type="text/javascript">
    // pre-submit callback
    function showRequest(formData, jqForm, options) {
//        var queryString = $.param(formData);
//        alert('About to submit: \n\n' + queryString);
//        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form)  {
        $("#showHospital_1").html("");
        $("#showHospital_2").html("");
        $.each(responseText, function(i, j){
            $("#dialog_"+i).remove();
            var num = (i%2)+1;//get id for showHospital (1 or 2)
            $("<div/>").attr({"class":"box1 p1","id":"box1_"+i}).appendTo("#showHospital_"+num);
            $("<div/>").attr({"class":"indent-box1","id":"indent-box1_"+i}).appendTo("#showHospital_"+num+" #box1_"+i);
            $("<table/>").attr({"id":"tblHospital_"+i}).appendTo("#showHospital_"+num+" #indent-box1_"+i);
            $("<tr/>").attr({"class":"","id":"trHospital_"+i}).appendTo("#showHospital_"+num+" #tblHospital_"+i);
            $("<td/>").attr({"class":"","id":"tdHospital-img_"+i}).appendTo("#showHospital_"+num+" #trHospital_"+i);
            $("<a/>").attr({"class":"lightbox-image","href":"<%=request.getContextPath()%>/images/hospital/"+j.id+".jpg","rel":"prettyphoto[hospitalSearch]","title":j.name}).appendTo("#showHospital_"+num+" #tdHospital-img_"+i);
            $("<img/>").attr("src","<%=request.getContextPath()%>/images/hospital/thumb/"+j.id+".jpg").appendTo("#showHospital_"+num+" #tdHospital-img_"+i+" a");
            $("<td/>").attr({"class":"","id":"tdHospital-dtl_"+i}).css({"padding":"10px 0 0 15px"}).appendTo("#showHospital_"+num+" #trHospital_"+i);
            $("<div/>").attr({"class":"medhub_dialog","id":"dialog_"+i}).css({"display":"none"}).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
            $("<div/>").attr({"class":"","id":"map_"+i}).css({"height":"100%"}).appendTo("#showHospital_"+num+" #dialog_"+i);
            $("<h4/>").text(j.name).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
            $("<div/>").text(j.location).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
            $("<em/>").text("Level : " + j.level).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
            $("<br/>").appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
            $("<a/>").attr({"class":"button2"}).text("Map Detail").click(function(){
                $("#dialog_"+i).dialog({
                    height: 600,
                    width: 800,
                    title: j.name
                });
                var latlng = new google.maps.LatLng(j.latitude, j.longtitude);
                $("#map_"+i).gmap({'center':latlng,'zoom':16,
                                    'callback': function(map) {
                                        $('#map_'+i).gmap('addMarker', {'position': latlng, 'title': j.location, 'draggable': false, 'bound': false}, function(map, marker) {
//                                                        findLocation(marker.getPosition(), marker);
                                            }).click( function() {

                                        })
                                    }
                });
            }).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
        });
        $("a[rel^='prettyphoto']").prettyPhoto({theme:'facebook'});
    }
    (function($) {
        $.fn.getHospital = function(){
            $.ajax({
              type: 'POST',
              url: '<%=request.getContextPath()%>/Public/Hospital/getHospital',
//              data: "{}",
//              contentType: "text/json; charset=utf-8",
              dataType: 'json',
              success: function(data){
                $.each(data, function(i, j){
                    $("#dialog_"+i).remove();
                    var num = (i%2)+1;//get id for showHospital (1 or 2)
                    $("<div/>").attr({"class":"box1 p1","id":"box1_"+i}).appendTo("#showHospital_"+num);
                    $("<div/>").attr({"class":"indent-box1","id":"indent-box1_"+i}).appendTo("#showHospital_"+num+" #box1_"+i);
                    $("<table/>").attr({"id":"tblHospital_"+i}).appendTo("#showHospital_"+num+" #indent-box1_"+i);
                    $("<tr/>").attr({"class":"","id":"trHospital_"+i}).appendTo("#showHospital_"+num+" #tblHospital_"+i);
                    $("<td/>").attr({"class":"","id":"tdHospital-img_"+i}).appendTo("#showHospital_"+num+" #trHospital_"+i);
                    $("<a/>").attr({"class":"lightbox-image","href":"<%=request.getContextPath()%>/images/hospital/"+j.id+".jpg","rel":"prettyphoto[hospital]","title":j.name}).appendTo("#showHospital_"+num+" #tdHospital-img_"+i);
                    $("<img/>").attr("src","<%=request.getContextPath()%>/images/hospital/thumb/"+j.id+".jpg").appendTo("#showHospital_"+num+" #tdHospital-img_"+i+" a");
                    $("<td/>").attr({"class":"","id":"tdHospital-dtl_"+i}).css({"padding":"10px 0 0 15px"}).appendTo("#showHospital_"+num+" #trHospital_"+i);
                    $("<div/>").attr({"class":"","id":"dialog_"+i}).css({"display":"none"}).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
                    $("<div/>").attr({"class":"","id":"map_"+i}).css({"height":"100%"}).appendTo("#showHospital_"+num+" #dialog_"+i);
                    $("<h4/>").text(j.name).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
                    $("<div/>").text(j.location).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
                    $("<em/>").text("Level : " + j.level).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
                    $("<br/>").appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
                    $("<a/>").attr({"class":"button2"}).text("Map Detail").click(function(){
                        $("#dialog_"+i).dialog({
                                height: 600,
                                width: 800,
                                title: j.name
                        });
                        var latlng = new google.maps.LatLng(j.latitude, j.longtitude);
                        $("#map_"+i).gmap({'center':latlng,'zoom':16,
                                            'callback': function(map) {
                                                $('#map_'+i).gmap('addMarker', {'position': latlng, 'title': j.location, 'draggable': false, 'bound': false}, function(map, marker) {
//                                                        findLocation(marker.getPosition(), marker);
                                                    }).click( function() {

                                                })
                                            }
                        });
                    }).appendTo("#showHospital_"+num+" #tdHospital-dtl_"+i);
                });
                $("a[rel^='prettyphoto']").prettyPhoto({theme:'facebook'});
              },
              error: function(){
                  alert("Error in json");
              }
            });
        };
    })(jQuery);
    $(document).ready(function() {
        $("#showHospital").getHospital(); //get All Hospital
        $("#formSearch").find("input, select").uniform();
        $("#btnReset").click(function(){
            $("#formSearch").get(0).reset();
            $.uniform.update(" input, select");
            return false});
        
        var options = {
            url: '<%=request.getContextPath()%>/Public/Hospital/formSearch_Submit',
            type: 'POST',
            dataType:  'json',
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback
        };
        $("#formSearch").validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit(options);
            }
        });
        
    });

</script>
<%-- End Form Function --%>

<!-- insert content here -->
<div class="grid_16">
     <form id="formSearch" class="form" action="" method="">
        <table class="bgTable">
            <tr >
                <td colspan="4" class="bgheader" ><h5>Search Hospital</h5></td>
            </tr>
            <tr >
                <td colspan="4" class="bgtop" >&nbsp;</td>
            </tr>
            <tr >
                <td  class="bgCellNormal">Keyword  ::&nbsp;</td>
              <td class="bgCellInput">   <input type="text" name="txtKeyword" id="txtKeyword" class="width-100" value="" /></td>
                <td  class="bgCellNormal">&nbsp;</td>
                <td  class="bgCellInput">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="4"  class="bgbutton">
                     <input type="reset" name="btnReset" id="btnReset" value="Reset" /> &nbsp;&nbsp;
                   <input type="submit" name="btnSubmit" id="btnSubmit" value="Search" /> </td>
            </tr>
        </table>
    </form>
    <br>
    <div class="container_16" id="showHospital">
        <div class="grid_8">
            <div id="showHospital_1"></div>
        </div>
        <div class="grid_8">
            <div id="showHospital_2"></div>
        </div>
    </div>
</div>